<template>
  <div class="cockpit-footer" @click.stop>
    <div class="footer">
      <!-- 左侧展开按钮 -->
      <el-tooltip
          effect="dark"
          content="展开左侧菜单"
          placement="top"
          popper-class="left-Close-Btn"
      >
        <div v-if="leftClose" class="leftClose" @click.stop="openLeft"></div>
      </el-tooltip>
      <!-- 左侧菜单 -->
      <div
        class="left"
        :class="{ leftCardClose: leftClose, leftCardOpen: !leftClose }"
      >
        <WarningEvents
          class="tabAnimation"
          @waringClick="$emit('waringClick')"
          @closeLeft="closeLeft"
        />
        <PlaneSorties
          class="tabAnimation"
          @closeLeft="closeLeft" />
        <AirLine class="tabAnimation" @closeLeft="closeLeft" />
      </div>
      <!-- 底部功能按钮 -->
      <PageChange />
      <!-- 右侧展开按钮 -->
      <el-tooltip
          effect="dark"
          content="展开右侧菜单"
          placement="top"
          popper-class="right-Close-Btn"
      >
        <div v-if="rightClose" class="rightClose" @click.stop="openRight"></div>
      </el-tooltip>
      <!-- 右侧菜单 -->
      <div
        class="right"
        :class="{ rightCardClose: rightClose, rightCardOpen: !rightClose }"
      >
        <FlyPlan
          class="tabAnimation"
          ref="flyPlanRef"
          @tabPhoneHidden="tabPhoneHidden"
          @flyPlanClick="$emit('flyPlanClick')"
          @closeRight="closeRight"
        />
        <ExecuteSorties @closeRight="closeRight" />
        <Ranking @closeRight="closeRight" />
      </div>
    </div>
    <canvas class="canvas" id="pag-footer" style="z-indx: 2"></canvas>
  </div>
</template>
<script>
export default {
  name: "Footer",
};
</script>
<script setup>
import WarningEvents from "./WarningEvents.vue";
import PlaneSorties from "./PlaneSorties.vue";
import AirLine from "./AirLine.vue";
import FlyPlan from "./FlyPlan.vue";
import ExecuteSorties from "./ExecuteSorties.vue";
import Ranking from "./Ranking.vue";
import PageChange from "./PageChange.vue";
import { onMounted } from "vue";
import { PAGInit } from "libpag";
import useCockpitStore from "@/store/modules/cockpit";

const cockpitStore = useCockpitStore();

const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["footerHide"]);

let pagView = null;

const leftClose = ref(true);
const rightClose = ref(true);
function initialization() {
  debugger
  PAGInit().then((PAG) => {
    let url = import.meta.env.VITE_BASE_PUBLICPATH + "/img/cockpit/single-footer.pag";
    fetch(url)
      .then((response) => response.blob())
      .then(async (blob) => {
        const file = new window.File(
          [blob],
          url.replace(/(.*\/)*([^.]+)/i, "$2")
        );
        const pagFile = await PAG.PAGFile.load(file);
        const canvas = document.getElementById("pag-footer");
        // 解决清晰度问题
        canvas.width = pagFile.width() * window.devicePixelRatio;
        canvas.height = pagFile.height() * window.devicePixelRatio;
        // 自适应
        pagView = await PAG.PAGView.init(pagFile, canvas, {
          useScale: false,
        });
        // 高清渲染
        // pagView = await PAG.PAGView.init(pagFile, "#pag");
        canvas.style.zIndex = 1;
        pagView.setRepeatCount(0);
        await pagView.play();
      });
  });
}

/**
 * @展开左侧菜单
 * */
function openLeft() {
  leftClose.value = false;
  // 报警统计数据
  cockpitStore.getAlarmNum();
  // 飞行器架次统计
  cockpitStore.getAircraftData();
  // 航线统计数据
  cockpitStore.getAirouteAsync();
  openLeftInter();
}

/**
 * @关闭左侧菜单
 * */
function closeLeft() {
  leftClose.value = true;
  clearInterval(leftInterval);
  leftInterval = null;
}

/**
 * @展开右侧菜单
 * */
function openRight() {
  rightClose.value = false;
  // 飞行计划统计
  cockpitStore.getFlyPlanData();
  // 执行架次统计
  cockpitStore.getExecuteData();
  openRightInter();
  emits("footerHide");
}

/**
 * @关闭右侧菜单
 * */
function closeRight() {
  rightClose.value = true;
  emits("footerHide");
  clearInterval(rightInterval);
  rightInterval = null;
}

let leftInterval = null;
function openLeftInter() {
  if (leftInterval) return;
  leftInterval = setInterval(() => {
    // 报警统计数据
    cockpitStore.getAlarmNum();
    // 飞行器架次统计
    cockpitStore.getAircraftData();
    // 航线统计数据
    cockpitStore.getAirouteAsync();
  }, 15000);
}

let rightInterval = null;
function openRightInter() {
  if (rightInterval) return;
  rightInterval = setInterval(() => {
    // 飞行计划统计
    cockpitStore.getFlyPlanData();
    // 执行架次统计
    cockpitStore.getExecuteData();
  }, 15000);
}

onMounted(() => {
  initialization();
});
</script>
<style lang="scss" scoped>
.cockpit-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 280px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  z-index: 10;
  padding: 20px;
  text-align: center;
  pointer-events: none;

  canvas {
    display: block;
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 3%;
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 3660px;
    height: 280px;
    margin-left: 83px;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center bottom;
    z-index: 10;

    .left,
    .right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      pointer-events: all;
    }

    .left {
      position: absolute;
      top: 0;
      left: 0;
    }

    .right {
      position: absolute;
      top: 0;
      right: 0;
    }

    .leftCardOpen {
      animation: leftCardOpen 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .leftCardClose {
      animation: leftCardClose 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }

    .rightCardOpen {
      animation: rightCardOpen 1s 1 alternate linear;
      animation-fill-mode: forwards;
      right: -1%;
    }

    .rightCardClose {
      animation: rightCardClose 1s 1 alternate linear;
      animation-fill-mode: forwards;
    }
  }

  .tabAnimation {
    animation: anima 1s 1 alternate linear;
    animation-fill-mode: forwards;
  }

  .leftClose {
    position: absolute;
    left: -1%;
    bottom: 5%;
    width: 100px;
    height: 100px;
    z-index: 199;
    cursor: pointer;
    pointer-events: all;
    background: url("/img/cockpit/leftClose.png");
  }
  .leftClose:hover {
    background: url("/img/cockpit/leftCloseActive.png");
  }
  .rightClose {
    position: absolute;
    right: -0.5%;
    bottom: 5%;
    width: 100px;
    height: 100px;
    z-index: 199;
    cursor: pointer;
    pointer-events: all;
    background: url("/img/cockpit/rightClose.png");
  }
  .rightClose:hover {
    background: url("/img/cockpit/rightCloseActive.png");
  }

  @keyframes leftCardOpen {
    0% {
      display: block;
      opacity: 0;
      -webkit-transform: translate(-1000px, 100px) scale(0);
    }
    100% {
      opacity: 1;
      transform: translate(0) scale(1);
    }
  }

  @keyframes leftCardClose {
    0% {
      opacity: 1;
      -webkit-transform: translate(0) scale(1);
    }
    100% {
      display: none;
      opacity: 0;
      transform: translate(-1000px, 100px) scale(0);
    }
  }

  @keyframes rightCardOpen {
    0% {
      display: block;
      opacity: 0;
      -webkit-transform: translate(1000px, 100px) scale(0);
    }
    100% {
      opacity: 1;
      transform: translate(0) scale(1);
    }
  }

  @keyframes rightCardClose {
    0% {
      opacity: 1;
      -webkit-transform: translate(0) scale(1);
    }
    100% {
      display: none;
      opacity: 0;
      transform: translate(1000px, 100px) scale(0);
    }
  }
}
</style>
